<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,,shrink-to-fit=no">
    <title>响应式轮播图</title>

    <link rel="stylesheet" href="1.css">
</head>

<body>

    <!-- 设置图片组（三张图片） -->
    <div class="slideshow-container">
        <div class="mySlides fade">
            <div class="numbertext">1 / 3</div>
            <img src="img/1.jpg" style="width:100%">
            <div class="text">美丽的山川</div>
        </div>

        <div class="mySlides fade">
            <div class="numbertext">2 / 3</div>
            <img src="img/2.jpg" style="width:100%">
            <div class="text">绚丽的云彩</div>
        </div>

        <div class="mySlides fade">
            <div class="numbertext">3 / 3</div>
            <img src="img/3.jpg" style="width:100%">
            <div class="text">呆萌的兔子</div>
        </div>

        <!-- 设置按钮，并添加一个js事件 -->
        <a class="prev" onclick="plusSlides(-1)">❮</a>
        <a class="next" onclick="plusSlides(1)">❯</a>
    </div>
    <br>

    <!-- 设置底部原点，并添加一个js事件 -->
    <div style="text-align:center">
        <span class="dot" onclick="currentSlide(1)"></span>
        <span class="dot" onclick="currentSlide(2)"></span>
        <span class="dot" onclick="currentSlide(3)"></span>
    </div>

    <script src="1.js"></script>
</body>

</html>